<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>摄彩空间——名片</title>
<style>
    .post{width:1024px;margin:0 auto;}
.entry{margin:0 auto;}
.title p{color:#999;font-size:15px;}

.cont{width:300px;margin:0 auto;padding:30px 0 50px 0;}
.contact_us{list-style: none;float:left;margin:0 auto;}
    .contact_us p span{font-size: 15px;color:#FF9900}
.contact_us a div{width:22px;height:25px;}
.contact_us .img1{display:inline-block;background: url("../image/content.png")0 0 no-repeat}
.contact_us .img2{display:inline-block;background: url("../image/content.png") -25px 0 no-repeat}
.contact_us .img3{display:inline-block;background: url("../image/content.png")  -55px 0 no-repeat}
.contact_us .img4{display:inline-block;background: url("../image/content.png")  -85px 0 no-repeat}
.contact_us .img5{display:inline-block;background: url("../image/content.png")  -115px 0 no-repeat}
.contact_us .img6{display:inline-block;background: url("../image/content.png")  -145px 0 no-repeat}
.contact_us .img7{display:inline-block;background: url("../image/content.png")  -175px 0 no-repeat}
.contact_us .img1:hover{background: url("../image/content.png")-1px -25px no-repeat}
.contact_us .img2:hover{background: url("../image/content.png") -25px -25px no-repeat}
.contact_us .img3:hover{background: url("../image/content.png")  -55px -25px no-repeat}
.contact_us .img4:hover{background: url("../image/content.png")  -85px -25px no-repeat}
.contact_us .img5:hover{background: url("../image/content.png")  -115px -25px no-repeat}
.contact_us .img6:hover{background: url("../image/content.png")  -145px -25px no-repeat}
.contact_us .img7:hover{background: url("../image/content.png")  -175px -25px no-repeat}
    #footer {
        clear: both;
        padding:5px  0;
        background: #46e3f7;
        text-align: center;
        font-size: smaller;
        color: #5799f7;
    }

    #footer a {
        color: #40b3f7;width:600px;
    }
</style>
</head>
<body>

<div id="page">
	<!-- start content -->
	<div id="content">
		<div class="post">
			<h2 class="title">名片</h2>

			<div class="entry" style="font-size: 14px; text-align: center;">
       <div class="cont">
      <div class="contact_us">
        <div style="width:300px;text-align: left;font-weight: bold;">
            <p>作品：<span>89</span></p>
            <p>喜欢：<span>89</span></p>
            <p>被喜欢：<span>89</span></p>
            <p>相机：<span>尼康 D800</span></p>
            <p>镜头：<span>尼康 AF-S 35mm f/1.4G</span></p>
            <p>偏好：<span>人像、婚纱</span></p>
            <p>签名：<span>啦啦啦啦啦啦</span></p>
            <h4>联系我：</h4></div>
        <a href="" onclick="alert('网页作业没有此功能哦！');" ><div class="img1" ></div></a>
        <a href="" onclick="alert('网页作业没有此功能哦！');" ><div class="img2"></div></a>
        <a href="" onclick="alert('网页作业没有此功能哦！');" ><div class="img3"></div></a>
        <a href="" onclick="alert('网页作业没有此功能哦！');" ><div class="img4"></div></a>
        <a href="" onclick="alert('网页作业没有此功能哦！');" ><div class="img5"></div></a>
          <a href="" onclick="alert('网页作业没有此功能哦！');" ><div class="img6"></div></a>
          <a href="" onclick="alert('网页作业没有此功能哦！');" ><div class="img7"></div></a>
      </div>
    </div>
  </div>
			</div>
		</div>
</div>
<div style="clear: both; height: 40px">&nbsp;</div>
<!-- end page -->
<div id="footer">
    <p>&copy;2016 All Rights Reserved. &nbsp;&bull;&nbsp; Designed by 王孔敏</p>
</div>
</body>
</html>
